<template>
  <div class="wallet-container">
    <div class="wallet-header">
      <div class="wallet-item consumption">
        <div class="wallet-info">
          <div class="wallet-title">
            <div class="wallet-icon"><img src="@/assets/icons/profile/outcome.webp" /></div>

            <h3>消费钱包</h3>
            <button class="exchange-btn" @click="showMaintenanceMessage">转换</button>
          </div>
          <div class="wallet-details">
            <p>
              球钻数量：<span>{{ consumptionWallet.balance }}</span>
            </p>
            <p>
              球票数量：<span>{{ consumptionWallet.tickets }}</span>
            </p>
          </div>
        </div>
      </div>

      <div class="wallet-item income">
        <div class="wallet-info">
          <div class="wallet-title">
            <div class="wallet-icon"><img src="@/assets/icons/profile/income.webp" /></div>
            <h3>收入钱包</h3>
          </div>

          <div class="wallet-details">
            <p>
              可提现球钻：<span>{{ withdrawableBalance }}</span>
            </p>
            <p>
              待提现球钻：<span>{{ pendingWithdrawalBalance }}</span>
            </p>
            <p>
              累计到账：<span>{{ totalReceived }}元</span>
            </p>
          </div>
        </div>
      </div>

      <div class="wallet-actions">
        <button class="recharge-btn" @click="showMaintenanceMessage">充值</button>
        <button class="withdraw-btn" @click="showMaintenanceMessage">提现</button>
      </div>
    </div>
    <div class="wallet-wrapper">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane v-for="tab in tabs" :key="tab" :tab="tab">
          <div class="wallet-content">
            <div class="filter-section">
              <a-space>
                <span>时间：</span>
                <a-range-picker v-model:value="dateRange" />
                <span>类型：</span>
                <a-select v-model:value="selectedType" style="width: 120px">
                  <a-select-option value="">全部</a-select-option>
                </a-select>
                <a-button type="primary" @click="handleQuery">查询</a-button>
              </a-space>
            </div>

            <a-table :columns="columns" :data-source="transactions" :pagination="pagination">
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                  <a @click="viewDetails(record)">查看</a>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Tabs, Table, Select, Button, DatePicker, Space, message } from 'ant-design-vue'
import { userStore } from '@/stores/user' // 导入 userStore

const store = userStore() // 初始化 store

const consumptionWallet = reactive({
  balance: 0.0,
  tickets: 0.0
})
const withdrawableBalance = ref(0)
const pendingWithdrawalBalance = ref(0)
const totalReceived = ref(0)
const activeTab = ref('消费明细')
const dateRange = ref([])
const selectedType = ref('')

const tabs = [
  '消费明细',
  '收入明细',
  '提现记录',
  '转换记录',
  '我的银行卡',
  '我的支付宝',
  '密码管理'
]

const columns = [
  { title: '时间', dataIndex: 'time', key: 'time' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '球钻数量', dataIndex: 'amount', key: 'amount' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '明细', dataIndex: 'action', key: 'action' }
]

const transactions = reactive([
  //   { id: 1, time: '2022-10-17 03:20:00', type: '活动任务', amount: '+1', status: '交易成功' },
  //   { id: 2, time: '2022-10-17 03:20:00', type: '活动任务', amount: '+1', status: '交易成功' }
])

const pagination = reactive({
  total: 50,
  current: 1,
  pageSize: 10,
  onChange: (page) => {
    console.log('页码变化:', page)
    // 这里可以添加页码变化时的逻辑
  }
})

const viewDetails = (record) => {
  console.log('查看详情:', record)
  // 这里可以添加查看详情的逻辑
}

const handleQuery = () => {
  console.log('查询条件:', { dateRange: dateRange.value, type: selectedType.value })
  // 这里可以添加查询逻辑
}

const showMaintenanceMessage = () => {
  message.info('维护中，请稍后再试')
}

onMounted(async () => {
  await store.getUserInfo() // 获取最新的用户信息
  updateWalletInfo() // 更新钱包信息
})

const updateWalletInfo = () => {
  if (store.userInfo) {
    consumptionWallet.balance = store.userInfo?.ball_diamond || 0
    consumptionWallet.tickets = store.userInfo?.ball_ticket || 0
    withdrawableBalance.value = store.userInfo.income_wallet?.withdrawable_balance || 0
    pendingWithdrawalBalance.value = store.userInfo.income_wallet?.pending_withdrawal_balance || 0
    totalReceived.value = store.userInfo.income_wallet?.total_received || 0
  }
}
</script>

<style lang="scss" scoped>
:deep(.ant-tabs-nav) {
  margin-bottom: 20px;

  // 添加以下样式
  .ant-tabs-ink-bar {
    background-color: #16b13a;
  }

  .ant-tabs-tab {
    color: #333; // 默认颜色

    &.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: #16b13a;
      }
    }
  }
}
.wallet-container {
  font-family: Arial, sans-serif;
  width: 980px;
  //   margin: 0 auto;

  .wallet-header {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .wallet-item {
      border-radius: 10px;
      padding: 15px;
      display: flex;
      align-items: center;
      flex: 1;

      &.consumption {
        margin-right: 10px;
      }

      &.income {
        margin-left: 10px;
      }

      .wallet-icon {
        font-size: 24px;
        margin-right: 15px;
        img {
          width: 30px;
        }
      }

      .wallet-info {
        .wallet-title {
          display: flex;
          align-items: center;
        }
        h3 {
          font-size: 18px;
          //   margin-bottom: 10px;
          color: #333;
        }

        .wallet-details {
          display: flex;
          align-items: center;
          padding-top: 10px;
          p {
            // margin;
            color: #666;
            font-size: 12px;
            margin-right: 10px;

            span {
              font-weight: bold;
              color: #16b13a;
              font-size: 14px;
              margin: 0 6px;
            }
          }
        }
      }
    }

    .exchange-btn {
      background: linear-gradient(270deg, #16b13a 0%, #80e197 100%);
      color: #fff;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 28px;
      font-size: 14px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      overflow: hidden;
      outline: none;
      border: none;
      margin-left: 20px;
    }
  }

  .wallet-actions {
    display: flex;
    // justify-content: flex-end;
    flex-direction: column;
    // margin-top: 20px;

    button {
      padding: 4px 30px;
      border-radius: 20px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      margin-left: 10px;

      &.recharge-btn {
        background: linear-gradient(270deg, #16b13a 0%, #80e197 100%);
        color: white;
        margin-bottom: 10px;
      }

      &.withdraw-btn {
        background-color: #ff7241;
        color: white;
      }
    }
  }
  .wallet-wrapper {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
  }
  .wallet-content {
    margin-top: 20px;

    .filter-section {
      margin-bottom: 20px;
    }
  }
}
</style>
